<script setup lang="ts">
import { getOrder } from "@/api/order/order";
import { addReview } from "@/api/review/review";
import router from "@/router";
import type { order, Product } from "@/types";
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
interface Review {
  productId: number;
  content: string;
  rating: number;
  createTime: string;
  parentId: number;
  isAnonymous: number;
  auditStatus: number;
  likeCount: number;
  orderId: string;
}
interface OrderItemList {
  orderItemId: number;
  orderId: string;
  productId: number;
  product: Product;
}
// 订单相关类型
interface OrderReviewState {
  orderDetails: order | null;
  reviewForms: Record<number, Review>;
}

const orderState = reactive<OrderReviewState>({
  orderDetails: null,
  reviewForms: {},
});
const route = useRoute();
async function load() {
  if (route.query.orderId != null)
    await getOrder([String(route.query.orderId)][0]).then((response) => {
      orderState.orderDetails = response.data.data;
      if (orderState.orderDetails !== null) {
        orderState.orderDetails.orderItemList.forEach((item: OrderItemList) => {
          orderState.reviewForms[item.product.productId] = reactive({
            productId: item.productId,
            content: "",
            rating: 5,
            createTime: "",
            parentId: 0,
            isAnonymous: 0,
            auditStatus: 0,
            likeCount: 0,
            orderId: item.orderId,
          });
        });
      }
    });
}
const submit = async () => {
  await addReview(orderState.reviewForms);
  router.go(-1);
};
load();
</script>
<template>
  <div v-if="orderState.orderDetails !== null">
    <h1>评价订单</h1>
    <span>订单号:{{ orderState.orderDetails?.orderId }}</span>
    <span style="margin-left: 20px">{{ orderState.orderDetails?.createTime }}</span>
    <el-divider />
    <el-card
      v-for="item in orderState.orderDetails?.orderItemList"
      style="width: auto"
      shadow="hover"
      class="appraise-card"
    >
      <el-row>
        <el-col :span="7">
          <div class="product-div">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.product.img"
              fit="fill"
            />
            <div>
              <span>{{ item.product.name }}</span
              ><br />
              <span>{{ item.product.description }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="appraise-div">
            <el-row style="align-items: center">
              <el-col :span="3">
                <span>商品评分</span>
              </el-col>
              <el-col :span="21">
                <el-rate
                  v-model="orderState.reviewForms[item.product.productId].rating"
                  :texts="['1分', '2分', '3分', '4分', '5分']"
                  show-text
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <span>评价留言</span>
              </el-col>
              <el-col :span="16">
                <el-input
                  v-model="orderState.reviewForms[item.product.productId].content"
                  maxlength="500"
                  placeholder="请输入内容"
                  show-word-limit
                  type="textarea"
              /></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div style="text-align: center">
      <el-divider />
      <el-button style="width: 200px" @click="submit">发表</el-button>
    </div>
  </div>
  <el-empty v-else description="没有评价订单">
    <el-button @click="router.push('/home')" type="primary">去逛逛</el-button>
  </el-empty>
</template>
<style lang="less" scoped>
.product-div {
  text-align: center;
  display: inline-block;
  width: 300px;
  height: 100%;
  border-right-style: solid;
  border-width: 1px;
  border-color: rgb(158, 158, 158);
}
.appraise-div {
  height: 100px;
}
</style>
<style lang="less">
textarea {
  min-height: 100px;
  max-height: 100px;
}
.el-textarea__inner {
  resize: none;
  border: none;
  outline: none;
  //   box-shadow: none;
}
</style>
